<template>
	<view class="sign">
		<view class="s_bg">
			<!-- <view class="flex flex-y-c flex-x-b p-20">
				<view class="s_m">
					攒积分兑好礼
				</view>
				<view class="">
					
				</view>
			</view> -->
		</view>
		
		<view class="p-30">
			<view class="s_sign">
				<view class="s_t flex flex-x-b flex-y-c">
					<view class="s_date flex flex-x-b flex-y-c">
						<img src="../../static/sign/sign.png" alt="">
						<view class="s_text">
							{{weekList.date}}
						</view>
					</view>
					<view class="s_content">
						当前积分:{{weekList.user_point}}
					</view>
				</view>
				
				<!-- 签到日期 -->
				
				<view class="sign_d flex flex-y-c flex-x-a"  >
					<view  v-for="(item,index) in weekList.list" :class="[day==item.day?'date_a':'date']" :key='index' @click="sign">
						<view class="week col-9">
							{{item.week}}
						</view>
						
						<view class="img_r"  v-if="day==item.day">
							√
						</view>
						<view class="" v-else>
							<view class="date_d col-2 f-38">
								{{item.day}}
							</view>
							<!-- <view class="sign_num col-f5" v-if="item.point>0">
								+{{item.point}}
							</view> -->
						</view>
						
					</view>
				</view>
				<view class="desc flex flex-y-c">
					<img src="../../static/sign/gold.png" alt="">
					<view class="d_t">
						连续签到得更多积分
					</view>
				</view>
				
				<view class="s_btn" v-show="!status"> 
					已签到
				</view>
				<view class="s_btn_b" @click="getSignList" v-show="status">
					快速签到
				</view>
			</view>
			
			<view class="billboard">
				<view class="b_title">
					签到榜
				</view>
				
				<view class="flex flex-x-a flex-y-c">
					<view class="one">
						<view class="t_1">
							<img src="../../static/sign/10.png" alt="">
						</view>
						<view class="">
							{{getLogList[1].mobile}}
						</view>
					</view>
					<view class="two">
						<view class="t_2">
							<img src="../../static/sign/9.png" alt="">
						</view>
						<view class="">
							{{getLogList[0].mobile}}
						</view>
					</view>
					<view class="three">
						<view class="t_3">
							<img src="../../static/sign/11.png" alt="">
						</view>
						<view class="">
							{{getLogList[2].mobile}}
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="b_l flex flex-y-c flex-x-b">
				<view class="flex flex-y-c">
					<view class="img_b">
						<img src="../../static/sign/7.png" alt="">
					</view>
					<view class="t_b">
						<view class="col-2">
							分享小程序({{shareTol}}/3)
						</view>
						<view class="col-9">
							分享好友可得2积分
						</view>
					</view>
				</view>
				
				<view class="b_btn" v-if="shareTol<3">
					 <button class="b_btns" type="default" open-type="share">去完成</button> 
				</view>
				<view class="b_btn" v-if="shareTol==3">
					已完成
				</view>
			</view>
			<view class="b_l flex flex-y-c flex-x-b">
				<view class="flex flex-y-c">
					<view class="img_b">
						<img src="../../static/sign/8.png" alt="">
					</view>
					<view class="t_b">
						<view class="col-2">
							绑定手机号
						</view>
						<view class="col-9">
							首次绑定手机号可得30积分
						</view>
					</view>
				</view>
				<view class="b_btn">
					已完成
				</view>
			</view>
			<view class="b_l flex flex-y-c flex-x-b">
				<view class="flex flex-y-c">
					<view class="img_b">
						<img src="../../static/sign/6.png" alt="">
					</view>
					<view class="t_b">
						<view class="col-2">
							推荐客户
						</view>
						<view class="col-9">
							推荐客户到店1人，可得300积分	
						</view>
					</view>
				</view>
				<view class="b_btn" @click="finish">
					去完成
				</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center">
			<view class="bg">
				<view class="b-p">
					<view class="m-t-b">
						<u-input v-model="referrer_name" placeholder="请填写被推荐人姓名" :type="type" :border="border" />
					</view>
					<view class="m-t-b">
						<u-input v-model="referrer_phone" placeholder="请填写被推荐人手机号" :type="type" :border="border" />
					</view>
					<view class="b_btn m-auto" @click="submit()">
						提交
					</view>
					<view class="b-text">
						您也可以拨打专属客服<span class='col-0' @click='getphone'>0351-2347114</span>进行推荐哦
						<!-- 或者您可以直接拨打<span class='col-0'>专属客服</span>电话进行推荐哦 -->
					</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as Api from '@/api/pony'
	export default{
		data(){
			return{
				show:false,
				value: '',
				type: 'text',
				border: true,
				weekList:{},
				getLogList:[],
				status:true,
				day:'',
				referrer_name:'',
				referrer_phone:'',
				shareTol:0
			}
		},
		onLoad() {
			this.getWeekData();
			this.getLogData();
		},
		onShow() {
			this.getWeekData();
			this.shareTol=uni.getStorageSync('shareTol')?uni.getStorageSync('shareTol'):'0'
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			app.finishBtn();
			
			
			return {
				title:'分享',
				path:'/pages/signIn/index',
				success:function(res){
					console.log(res)
					app.finishBtn();
				}
			}
			// return shareObj
			
			
		},
		methods:{
			sign(){
				uni.navigateTo({
					url:'/pages/signIn/sign'
				})
			},
			getphone(){
				uni.makePhoneCall({
					phoneNumber: '0351-2347114', //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
							
					},
				})
			},
			finishBtn(){
				var app=this
				Api.logShare()
				.then(result => {
					if(app.shareTol=='0'){
						var num = 0+1
						console.log(num)
						uni.setStorageSync('shareTol',num)
					}else if(app.shareTol=='1'){
						var num = 1+1
						console.log(num)
						uni.setStorageSync('shareTol',num)
					}else if(app.shareTol=='2'){
						var num = 2+1
						console.log(num)
						uni.setStorageSync('shareTol',num)
					}
					
					// 设置页面数据
					console.log(result)
				})
			},
			finish(){
				this.show=true
			},
			getWeekData(callback) {
				const app = this
				Api.getWeek()
				.then(result => {
					// 设置页面数据
					app.weekList = result.data
					
					if(app.weekList.is_sign=='0'){
						app.status=true;
						var date = new Date();
						this.day = date.getDate();
					}else{
						app.status=false;
						var date = new Date();
						this.day = date.getDate();
					}
				})
				.finally(() => callback && callback())
			},
			getLogData(callback){
				const app = this
				Api.getLogPound()
				.then(result => {
					// 设置页面数据
					app.getLogList = result.data.list
				})
				.finally(() => callback && callback())
			},
			getSignList(){
				const app = this
				Api.getSign()
				.then(result => {
					// 设置页面数据
					this.getWeekData()
					console.log(result)
					app.status=false
					var date = new Date();
					this.day = date.getDate()
				}).catch(res=>{
					var date = new Date();
					this.day = date.getDate()
					app.status=false
					console.log(res)
				})
			},
			submit(){
				const app = this
				Api.recommendAdd(
				{
					referrer_name:this.referrer_name,
					referrer_phone:this.referrer_phone
				})
				.then(result => {
					// 设置页面数据
					this.show=false
				}).catch(res=>{
					this.show=false
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
	}
	.flex-y-c{
		align-items: center;
	}
	.flex-x-b{
		justify-content: space-between;
	}
	.flex-x-a{
		justify-content: space-around;
	}
	.col-9{
		color: #999;
	}
	.col-2{
		color: #231816;
	}
	.col-f5{
		color:#F5AD36 ;
	}
	.col-0{
		color: #000000;
	}
	.f-38{
		font-size: 38rpx;
	}
	.sign{
		
	}
	.s_bg{
		width: 750rpx;
		height: 422rpx;
		background-image: url('http://tu.qixiaocheng.com/xiaomahuanteng/13.png');
		background-repeat: no-repeat;
		background-size: cover;
		// background: linear-gradient(174deg, #FFB617 0%, #FFC64B 100%);
		// border-radius:0 0 30% 30%;
		.p-20{
			padding: 80rpx 40rpx;
		}
		.s_m{
			font-size: 50rpx;
			font-family: FZZhengHeiS-EB-GB;
			font-weight: 400;
			font-style: italic;
			color: #FFFFFF;
			line-height: 81rpx;
			text-shadow: 0rpx 7rpx 0rpx rgba(255,255,255,0.22);
		}
	}
	
	
	.p-30{
		padding: 0 30rpx;
		margin-top: -200rpx;
		.s_sign{
			height: 443rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.s_t{
				.s_date{
					margin-left: 20rpx;
					img{
						width: 97rpx;
						height: 90rpx;
					}
					.s_text{
						font-size: 34rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #231816;
						margin-left: 30rpx;
					}
				}
				.s_content{
					height: 86rpx;
					background: rgba(248,186,51,0.1);
					border-radius: 0rpx 30rpx 0rpx 0rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #F8BA33;
					line-height: 86rpx;
					padding:0 20rpx;
				}
			}
		}
		
		.sign_d{
			margin-top: 50rpx;
			.date_a{
				background: rgba(255,191,49,0.7);
				border-radius: 10rpx;
				padding: 20rpx;
				text-align: center;
				.date_d{
					margin: 20rpx 0;
					font-weight: bold;
				}
				.img_r{
					width: 40rpx;
					height: 40rpx;
					background: #FF8D00;
					border-radius: 50%;
					margin: 0 auto;
					color: #fff;
					margin: 45rpx 0 5rpx 10rpx;
					text-align: center;
				}
			}
			.date{
				background: #F7F7F7;
				border-radius: 10rpx;
				padding: 20rpx;
				text-align: center;
				.date_d{
					margin: 20rpx 0;
					font-weight: bold;
				}
				.img_r{
					width: 40rpx;
					height: 40rpx;
					background: #FF8D00;
					border-radius: 50%;
					margin: 0 auto;
					color: #fff;
					margin: 45rpx 0;
					text-align: center;
				}
			}
		}
		.desc{
			padding: 20rpx;
			img{
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
			.d_t{
				font-size: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #959595;
			}
		}
		.s_btn{
			width: 316rpx;
			height: 88rpx;
			background: #D2D2D2;
			border-radius: 44rpx;
			text-align: center;
			margin: 0 auto;
			line-height: 88rpx;
			font-size: 34rpx;
			color: #FFFFFF;
		}
		.s_btn_b{
			width: 316rpx;
			height: 88rpx;
			background: linear-gradient(184deg, #F8BA33 0%, #F0943E 100%);
			border-radius: 44rpx;
			text-align: center;
			margin: 0 auto;
			line-height: 88rpx;
			font-size: 34rpx;
			color: #FFFFFF;
		}
		
		.billboard{
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-top: 100rpx;
			padding: 20rpx;
			.b_title{
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}
			.one{
				text-align: center;
			}
			.t_1{
				width: 98rpx;
				height: 98rpx;
				background: #FFFFFF;
				border: 4rpx solid #B4D0F5;
				border-radius: 50%;
				margin: 0 auto;
				position: relative;
				img{
					position: absolute;
					width: 100rpx;
					height: 40rpx;
					bottom: 0;
					left: -3px;
				}
			}
			.t_2{
				width: 123rpx;
				height: 123rpx;
				background: #FFFFFF;
				border: 4rpx solid #FECE6C;
				border-radius: 50%;
				margin: 0 auto;
				position: relative;
				img{
					position: absolute;
					width: 140rpx;
					height: 40rpx;
					bottom: 0;
					left: -14rpx;
					
				}
			}
			.t_3{
				width: 98rpx;
				height: 98rpx;
				background: #FFFFFF;
				border: 4rpx solid #E3B07D;
				border-radius: 50%;
				margin: 0 auto;
				position: relative;
				img{
					position: absolute;
					width: 100rpx;
					height: 40rpx;
					bottom: 0;
					left: -3px;
				}
			}
		}
		
		.b_l{
			padding: 40rpx 20rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-top: 30rpx;
			.img_b{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.b_btn{
				width: 131rpx;
				height: 56rpx;
				background: linear-gradient(0deg, #FFD84A 0%, #FFC617 100%);
				border-radius: 28rpx;
				line-height: 56rpx;
				text-align: center;
			}
			.b_btns{
				width: 131rpx;
				height: 56rpx;
				background: linear-gradient(0deg, #FFD84A 0%, #FFC617 100%);
				border-radius: 28rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				padding: 0;
			}
		}
	}
	
	.bg{
		background-image: url('http://tu.qixiaocheng.com/xiaomahuanteng/bg.png');
		background-size: cover;
		width: 544rpx;
		height: 790rpx;
		background-position: 0 0 ;
		position: relative;
	}
	.u-mode-center-box{
		background-color: 0 !important;
	}
	
	.b-p{
		// position: absolute;
		// bottom: 52rpx;
		// left: 45rpx;
		padding: 20rpx;
		padding-top: 370rpx;
	}
	
	.b_btn{
		width: 462rpx;
		height: 70rpx;
		background: #000000;
		border-radius: 33rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}
	.m-auto{
		margin: 0 auto;
	}
	.m-t-b{
		margin: 30rpx auto;
	}
	.b-text{
		font-size: 20rpx;
		color: #333;
		margin-top: 20rpx;
		text-align: center;
	}
</style>